<template>
	<div class="modal-container">
		<teleport v-if="attrs.searchContainer" :to="attrs.searchContainer">
			<!-- <a-input-search v-model:value="like" placeholder="请输入需要查找的房源地址" enter-button="搜索" @search="onSearch" /> -->
			<search-input v-model:params="params" v-bind="searchOption" />
		</teleport>
		<div v-else class="search-container">
			<search-input v-model:params="params" v-bind="searchOption" />
		</div>
		<div class="modal-grid">
			<vxe-grid ref="grid" v-bind="gridOptions">
				<template #noOpenDays="{row}">
					<div class="noOpenDays-col">
						<i class="warning-icon"></i>
						<span>{{ row.noOpenDays }}</span>
					</div>
				</template>
			</vxe-grid>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {reactive, ref, useAttrs} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {trafficWarning} from '@/api/device'
	import {SearchProps} from 'yuxin-base/src/types'

	const attrs = useAttrs()
	// 搜索配置
	const searchOption = reactive<SearchProps>({
		placeholder: '请输入需要查找的房源地址',
		// 搜索匹配类型
		matchTypes: [],
		// 搜索选项配置
		options: [],
		onSearch() {
			onSearch()
		}
	})

	const params = ref({
		like: null
	})
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		align: 'left',
		height: 'auto',
		showOverflow: true,
		rowConfig: {isHover: true},
		columns: [
			{title: '姓名', minWidth: 100, field: 'name'},
			{title: '手机号', minWidth: 120, field: 'phone'},
			{title: '房源地址', minWidth: 240, field: 'houseAddress'},
			{title: '开门类型', minWidth: 100, field: 'openTypeName'},
			{title: '上一次开门时间', minWidth: 200, field: 'lastOpenTime'},
			{title: '未开门天数', minWidth: 100, slots: {default: 'noOpenDays'}},
			{title: '重点人群类型', minWidth: 150, field: 'keyGroupsTypeName'}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return queryData({like: params.value.like, current, size})
				}
			}
		}
	})

	const openTypeMap: any = {
		1: '内开',
		2: '外开'
	}

	async function queryData(query: any) {
		const res = await trafficWarning(query)
		res.data.records = res.data.records.map((data: any) => {
			return {
				...data,
				keyGroupsTypeName: data.keyGroupsTypeName || '-',
				openTypeName: openTypeMap[data.openType] || '-'
			}
		})
		return res
	}

	function onSearch() {
		grid.value.commitProxy('query')
	}
</script>

<style scoped>
	.modal-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.search-container {
		padding-bottom: 12px;
	}
	.modal-grid {
		flex: 1;
		overflow: hidden;
	}
	.warning-icon {
		margin-right: 6px;
		width: 18px;
		height: 18px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 18px;
		background-position: right bottom;
		background-image: url();
	}
	.noOpenDays-col {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
